/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<view class="beijing">
			<image src="../static/jigoureg.jpg" mode="aspectFill"></image>
		</view>
		
		
		<form @submit="submit" :model="applyForm">
			<xfl-select
				:list="media"
				:clearable="false"
				:showItemNum="5" 
				:style_Container="'height: 50px; font-size: 16px;'"
				:placeholder = "'请选择分类'"
				:selectHideType="'hideAll'"
				@change='selected_media'
				v-model="applyForm.fenleiid"
			>
			</xfl-select>
			<input class="name" v-model="applyForm.name" type="text" placeholder="*请输入机构名称" />
			<input class="name" @click="openLevel" :value="cityname" disabled placeholder="*请选择省市区" style="background-color: #ddd;"/>
			<input class="name"  v-model="applyForm.city" style="background-color: #ddd;display: none;"/>
			<w-picker
				:visible.sync="visible"
				mode="region"
				default-type="id"
				:default-props="defaultProps1"
				@confirm="onConfirm($event,'region')"
				@cancel="onCancel"
				ref="region"
			></w-picker>
			<input class="name" v-model="applyForm.address" type="text" placeholder="*请输入机构地址" />
			<input class="name" v-model="applyForm.leader" type="text" placeholder="*请输入负责人姓名" />
			<input class="phone" v-model="applyForm.phone" type="text" placeholder="*请输入负责人手机号" />
			<input type="text" v-model="loadImage" class="name" style="display: none;"/>
			<view class="code">
				<input type="text" v-model="applyForm.code" placeholder="*请输入手机验证码" />
				<text class="shuxian">|</text>
				<view class="sendcode" @click="getcode">{{timetext}}</view>
			</view>
			<view class="file">
				<image @click="upLoadImage" :src="loadImage ? loadImage : '../static/default-image.png'" mode="aspectFit"></image>
				<text>*上传机构照片</text>
			</view>
			<view class="file" style="margin-bottom: 150upx;">
				<image @click="upLoadImage2" :src="loadImage2 ? loadImage2 : '../static/default-image.png'" mode="aspectFit"></image>
				<text>*上传营业执照</text>
			</view>
			<view class="submit">
				<button form-type="submit" type="primary">立即申请</button>
				<button @click="login" type="default">机构登录</button>
			</view>
		</form>
		
		
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import { postTeacherJsreg, postSendCode } from '@/request/tutor'
	import {checkUserinfo} from '@/request/checkUserinfo'
	export default {
		components: {
			wPicker,xflSelect
		},
		data() {
			return {
				userinfo: {},
				is_sh: 0,
				loadImage:'',
				loadImage2:'',
				flag:false,
				timetext:'获取验证码',
				cityname:'',
				applyForm: {
					name: '',
					phone: '',
					code: '',
					uid: '',
					address:'',
					leader:'',
					thumb:'',
					license:'',
					city:'',
					fenleiid:''
				},
				visible:false,
				media:[
				],
				showPicker: false,
				timer:null,
				secNum:60
			};
		},
		
		onShow() {
			checkUserinfo()
			let userinfo=uni.getStorageSync('userinfo')
			this.userinfo = userinfo.userdata
			this.get_fltree();
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		methods: {
			get_fltree(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pxb/fl_select_json',
					method:'POST',
					data:{	
					},
					success:(res) =>{
						console.log(res.data);
						this.media=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			selected_media (e) {
				console.log(e)
				this.applyForm.fenleiid = e.newVal
			},
			openLevel() {
				this.visible=true;
			},
			onCancel(){
				this.visible=false;
			},
			onConfirm(e) {
				// e 确认后选中的数据
				console.log(e)
				this.cityname=e.result;
				this.applyForm.city = e.value.toString();
				console.log(this.applyForm.city)
			},
			login(){
				uni.navigateTo({
					url:'../jigou-login/jigou-login'
				})
			},
			upLoadImage(){
				uni.chooseImage({
				    count:1,
					sizeType:['copressed'],
				    success:(res)=>{
						//console.log(res);
						const BASE_URL=uni.BASE_URL;
						const HOST_URL = uni.HOST_URL;
				        const tempFilePaths = res.tempFilePaths;
						var imgFiles = res.tempFilePaths[0];
						var that=this
				        uni.uploadFile({
							url:BASE_URL+'index/upload/uploadLocality',		//post请求的地址
							filePath:imgFiles,
								name:'file',	
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								var imgurl = uploadFileRes.data;
								this.loadImage = imgurl;
							}
						})
				    },
				})
			},
			upLoadImage2(){
				uni.chooseImage({
				    count:1,
					sizeType:['copressed'],
				    success:(res)=>{
						//console.log(res);
						const BASE_URL=uni.BASE_URL;
						const HOST_URL = uni.HOST_URL;
				        const tempFilePaths = res.tempFilePaths;
						var imgFiles = res.tempFilePaths[0];
						var that=this
				        uni.uploadFile({
							url:BASE_URL+'index/upload/uploadLocality',		//post请求的地址
							filePath:imgFiles,
								name:'file',	
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								var imgurl = uploadFileRes.data;
								this.loadImage2 = imgurl;
							}
						})
				    },
				})
			},
			submit () {
				if(this.applyForm.name == '' || this.applyForm.city == '' || this.applyForm.code == '' || this.applyForm.address == '' || this.applyForm.leader == '' || this.applyForm.phone == '') {
					uni.showToast({
						title: '必填项不能为空',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(!/^\d{6}$/.test(this.applyForm.code)) {
					uni.showToast({
						title: '验证码必须为6为数字',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(!/^1[3-9]\d{9}$/.test(this.applyForm.phone)) {
					uni.showToast({
						title: '手机号码格式不正确,请重试',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				let userinfo=uni.getStorageSync('userinfo')
				this.applyForm.uid = userinfo.uid
				this.applyForm.thumb = this.loadImage
				this.applyForm.license = this.loadImage2
				uni.showLoading({
					title:'注册中...'
				})
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pxb/reg',
					method:'POST',
					data:this.applyForm,
					success:(res) =>{
						console.log(res.data);
						uni.hideLoading();
						if(res.data.code == 0){
							uni.showToast({
								title: '提交成功等待审核',
								duration: 2000,
							});
						}else{
							console.log(res.data);
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			//发送验证码
			getcode(){
				this.flag = true;
				// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
				if(this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				var phone = this.applyForm.phone;
				const BASE_URL=uni.BASE_URL
				if(phone==''){
				  uni.showToast({
					  title: '手机号码不能为空',
					  duration: 2000,
					  icon:'none'
				  });
				  return false;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
					uni.showToast({
						title: '手机号码格式不正确,请重试',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				uni.request({
					url: BASE_URL+'index/user/sendcode',
					data: {
						phone:phone
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						if(res.data.data.Code=='OK' || res.data.data.code==0){
							uni.showToast({
								title: '已发送',
								duration: 2000
							});
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
				this.timer = setInterval(()=> {
					this.secNum --;
					this.timetext = this.secNum+' s';
					if(this.secNum <= 0){
						clearInterval(this.timer);
						this.timer = null;
						this.flag = false;
						this.secNum = 60;
						this.timetext = "获取验证码";
						return;
					}
				},1000);
			}
		}
	}
</script>

<style lang="less" scoped>

.beijing {
	image {
		width: 750upx;
		height: 350upx;
	}
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 55upx;
		left: 300upx;
		image {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
		}
		text {
			font-size: 34upx;
			color: #fff;
			margin-top: 20upx;
		}
	}
}

form {
	.name, .phone {
		width: 690upx;
		height: 80upx;
		border: 2upx solid #333;
		border-radius: 10upx;
		margin: 20upx 30upx 0;
		padding-left: 20upx;
		box-sizing: border-box;
	}
	.file {
		image {
			width: 150upx;
			height: 150upx;
			margin: 30upx 0 0 30upx;
			border: 2upx dotted #eee;
			border-radius: 10upx;
			box-shadow: 5upx 5upx 5upx 5upx #ddd;
		}
		text {
			font-size: 30upx;
			color: #333;
			margin-left: 20upx;
		}
	}
	.code {
		width: 690upx;
		height: 80upx;
		// background-color: orange;
		margin: 20upx 30upx 0;
		box-sizing: border-box;
		display: flex;
		position: relative;
		.shuxian {
			position: absolute;
			top: 16upx;
			right: 200upx;
			color: #ddd;
		}
		input {
			width: 490upx;
			height: 80upx;
			border: 2upx solid #333;
			border-right: 0;
			border-radius: 10upx 0 0 10upx;
			padding-left: 20upx;
			box-sizing: border-box;
		}
		.sendcode {
			width: 200upx;
			height: 80upx;
			text-align: center;
			line-height: 76upx;
			border: 2upx solid #333;
			border-left: 0;
			border-radius: 0 10upx 10upx 0;
			font-size: 30upx;
			color: #333;
			// padding: 0;
			box-sizing: border-box;
			background-color: #f5f5f5;
		}
	}
	.submit {
		width: 100%;
		height: 120upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		button {
			padding: 0 50rpx;
			height: 80upx;
			background-color: #4b89ff;
			border-radius: 80upx;
			color: #fff;
			line-height: 80upx;
		}
	}
}



</style>
